window.onload = function() {

	var pages = document.getElementsByClassName('page');
	var page1_number = document.getElementById('page1_number');
	var page2_my = document.getElementById('page2_my');
	var page2_my2 = document.getElementById('page2_my2');
	var page2_duihuakuang = document.getElementById('page2_duihuakuang');
	var page2_btn = document.getElementById('page2_btn');
	var page4_beijing = document.getElementById('page4_beijing');
	var page4_shanghai = document.getElementById('page4_shanghai');
	var page4_guangzhou = document.getElementById('page4_guangzhou');
	var page4_zuobiao = document.getElementsByClassName('page4_zuobiao');
	var page4_jieshaoimg = document.getElementsByClassName('page4_jieshaoimg');
	var page4_btn = document.getElementById('page4_btn');
	var page5_btn = document.getElementById('page5_btn');
	var startY, endY, dis = 0;
	var index = 0;
	var num = 0;
	var page4_key = 0;
	var canmove = true;
	
	
	// 第二页
	var page2_btn = document.getElementsByClassName('page2_btn')[0]
	var name = document.getElementById('name')
	var six = document.getElementById('zhiye')
	// 第三页
	var page3_name = document.getElementById('page3_name')
	var page3_six = document.getElementById('page3_six')
	
	page2_btn.onclick = function(){
			
		if(name.value==''){
			alert("请输入您的姓名哦~")
		}else{
			page3_name.innerHTML ="你好," + name.value
			if(six.value=='男生'){
				console.log(1)
				page3_six.innerText = "你是个可爱的大男孩";
			}else{
				console.log(2)
				page3_six.innerHTML = "你是个可爱的女孩子";
			}
			Next(1)
		}
		
	}
	var page3_btn = document.getElementsByClassName('page3_btn')[0]
	page3_btn.onclick = function(){
		Next(2)
	}
	
	// 第四页
	var page4_btn = document.getElementsByClassName('item');
	var yuan = document.getElementsByClassName('item_a');
	var page4_t = document.getElementsByClassName('viewtext_color_white')
	var page4_hide = document.getElementsByClassName('viewtext_color_green')
	
	// var page4_viod = document.getElementById('page4_v');
	var page4_ok = document.getElementById('btnpage3');
	var page4key = false;
	var arr = [];
	var isture = false;
	var scores = 0;
	
			// page4_viod.onclick = function(){
			// 		Last(index);
			// 		// 進行清空選中
			// 		for(let i=0;i<arr.length;i++){
			// 			page4_btn[i].style.background = 'green'
			// 			yuan[i].style.color = 'green';
			// 			page4_t[i].style.color = '#fff';
			// 			page4_hide[i].style.display = 'none';
			// 		}
			// 		arr = [];
					
			// 	}
	
	
			page4_ok.onclick = function(){
				console.log(33)
				Next(3)
				// 获取到的分数
				// function score(){
				// 	return arr.length *0.5
				// }
				// scores = score()
				// scoreVelue.innerHTML = scores
				// console.log(score())
				page5_main()
			}
	
						// 选中
					// page4_btn[i].style.background = 'yellow'
					// yuan[i].style.color = 'red';
					// page4_t[i].style.color = 'red';
					// page4_hide[i].style.display = 'inline-block';
					// arr.push(page4_t[i].innerHTML);
					// console.log(arr);
					
					// 没选中
					// page4_btn[i].style.background = 'green'
					// yuan[i].style.color = 'green';
					// page4_t[i].style.color = '#fff';
					// page4_hide[i].style.display = 'none';
	
			for(let i = 0;i<page4_btn.length;i++){
				page4_btn[i].onclick=function(){
					
					page4_btn[i].classList.add('btnxk')
					
					isture =	arr.includes(page4_t[i].innerText);
					console.log(isture)
					if(isture==true){
						console.log('数组已存在该元素')
						// page4_btn[i].style.background = 'green'
						// yuan[i].style.color = 'green';
						// page4_t[i].style.color = '#fff';
						// page4_hide[i].style.display = 'none';
					}else{
						page4_btn[i].style.background = 'yellow'
						yuan[i].style.color = 'red';
						page4_t[i].style.color = 'red';
						page4_hide[i].style.display= 'inline-block';
						arr.push(page4_t[i].innerHTML);
						// console.log(arr);
					}
					console.log(arr)
				}
				
		}
		// 第五頁
		// 判断分数渲染星星
		// console.log(scores)
		var creEle = document.getElementById('creEle');
		var scoreVelue = document.getElementById('score')
		var xing  = document.getElementsByClassName('xing')
		var btn5 = document.getElementsByClassName('btn5')[0]
		btn5.onclick = function(){
			console.log(99)
			window.location.reload()
			Next(0)
		}
		function page5_main(){

			for(let i=0;i<arr.length;i++){
				var crediv = document.createElement('div')
				crediv.innerHTML = arr[i]
				crediv.classList.add('page5_dome')
				creEle.appendChild(crediv)
			}
			
		}

	var tid = setInterval(function() {
		num++;
		page1_number.innerHTML = num + "%";
		if(num >= 100) {
			clearInterval(tid);
			Next(0);
		}
	}, 100);

	document.addEventListener('touchstart', function(e) {
		var touch = e.touches[0];
		startY = touch.pageY;
	});

	document.addEventListener('touchmove', function(e) {
		var touch = e.touches[0];
		endY = touch.pageY;
		dis = startY - endY;
	});
	//	document.addEventListener('touchend', function(e) {
	//		if(Math.abs(dis) > 0) {
	//			if(dis > 0) {
	//				pageTop(index);
	//				qingling();
	//			} else {
	//				pageDown(index);
	//				qingling();
	//			}
	//		}
	//	});
	
function Next(n){
	if(n<pages.length-1){
		n++;
		index++;
		
		pages[n-1].classList.add('up_top')
		pages[n].classList.add('in_top')
		
		pages[n].classList.remove('in_down','up_down')
		pages[n].style.display = 'block';
		setTimeout(function(){
			pages[n-1].style.display = 'none'
		},1000)
		// pages[n-1].style.display = 'none'
	}
}

	function pageDown(n) {
		if(n > 0) {
			n--;
			index--;

			setTimeout(function() {
				pages[n + 1].classList.add('hide');
			}, 1000);
			pages[n].style.display = 'none';
			pages[n+1].style.display = 'none';
		}
	}

	function qingling() {
		startY = 0;
		endY = 0;
		dis = 0;
	}

}